<template>
	<div class="boxStyle">
		<el-row type="flex" class="row-bg" justify="start" style="margin-bottom: 10px;">
			<el-col :span="1" style="margin-top: 5px;padding-left: 10px;">名称 :</el-col>
			<el-col :span="2">
				<el-input v-model="sName" placeholder="请输入名称" size="small"></el-input>
			</el-col>
			<el-col :span="1" style="margin-left: 20px;margin-top: 5px;padding-left: 10px;">类别 :</el-col>
			<el-col :span="4">
				<el-select v-model="sVal" placeholder="请选择" size="small" style="width: 260px;">
					<el-option value="" label="全部"></el-option>
					<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:50px;margin-left:80px;">
				<el-button type="warning" size="small" @click="search" icon="el-icon-search">查找</el-button>
			</el-col>
			<!--<el-col :span="1" v-if="addShow!==-1">
				<el-button type="warning" size="small" @click="add" icon="el-icon-plus">新增</el-button>
			</el-col>-->
		</el-row>
		<el-table ref="multipleTable" stripe border :data="tableLists" tooltip-effect="dark" style="margin-bottom: 10px;width: 100%">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="id" label="id" width="120"></el-table-column>
			<el-table-column prop="name" label="名称" width="120"></el-table-column>
			<el-table-column prop="describ" label="描述" width="350"></el-table-column>
			<el-table-column prop="pid" label="parentId" width="120"></el-table-column>
			<el-table-column prop="sort" sortable label="排序"></el-table-column>
			<!--<el-table-column label="操作" v-if="updateShow!==-1">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click="update(scope.$index,scope.row.id)">更新信息</el-button>
				</template>
			</el-table-column>-->
		</el-table>
		<el-pagination background @current-change="handleCurrentChange" :current-page="currentPage1" :page-size="size" layout="prev, pager, next,total, slot" :total="totals">
			<span style="margin-top: -2px;color: #606266;font-weight: 100;">第<el-input type="text" v-model="inputPage" style="width: 60px;margin: 0 5px;"/>页<el-button size="mini" style="background: #409EFF; color: #fff;margin:0 5px;" @click="handleCurrentChange(inputPage)">跳转</el-button><span>总计{{totalPage}}页</span></span>
		</el-pagination>
		<div class="modal fade" id="dic" tabindex="-1" role="dialog" data-keyboard="false">
			<div class="modal-dialog" role="document">
				<div class="modal-content" style="width:800px;height: 300px;">
					<div class="modal-header" style="border-radius: 4px;">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
						<ul class="nav nav-tabs dic" role="tablist">
							<li role="presentation" class="active">
								<a href="#qusInfo" aria-controls="qusInfo" role="tab" data-toggle="tab"></a>
							</li>
						</ul>
					</div>
					<div class="modal-body" style="padding-right: 60px;height:170px;overflow: hidden;overflow-y: auto;">
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="qusInfo">
								<el-form :model="ruleDic" :rules="rules" ref="ruleDic" label-width="100px" class="demo-ruleForm">
									<input type="hidden" name="id" v-model="id">
									<el-col :span="12">
										<el-form-item label="字典名称:" prop="udicName">
											<el-input v-model="ruleDic.udicName" size="small"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="描述 :" prop="udicDescribe">
											<el-input v-model="ruleDic.udicDescribe" size="small"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="排序 :" prop="udicSort">
											<el-input v-model="ruleDic.udicSort" size="small"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="所属父类 :" prop="pid">
											<el-select v-model="ruleDic.pid" size="small" style="width: 262px;">
												<el-option :value="0" :label="plevel"></el-option>
												<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-form>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-success" id="save" @click="save('ruleDic')">保存</button>
						<button type="button" class="btn btn-success" id="usave" @click="uSave('ruleDic')">保存</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
			<div></div>
		</div>
	</div>
</template>

<script>
	import axios from "axios"
	import qs from "qs"
	import { NAMENOT_NULL } from "static/js/rules.js"
	export default {
		data() {
			return {
				selectArr: [],
				tableLists: [],
				currentPage1: 1, //当前页
				totals: 0, //分页总条数
				size: 0, //每页条数
				totalPage: 0, //总页数
				purl: this.$store.state.purl, //权限数组
				updateShow: 0, //是否显示更新信息
				addShow: 0, //是否显示新增
				sName: "", //查找名称
				options: [], //类别
				sVal: '', //查找类别
				seleAll: "全部",
				plevel: "父级",
				ruleDic: {
					udicName: "",
					udicDescribe: "",
					udicSort: "",
					pid: 0,
				},
				id: "",
				rules: {
					udicName: NAMENOT_NULL
				},
				inputPage: 1

			}
		},
		activated() {
			this.sName = ""; //查找名称
			this.sVal = ""; //查找类别
			this.load(1);
			this.currentPage1 = 1;
			this.addShow = this.purl[0].findIndex((val) => val === "/interface/dictionary/create") //判断是否拥有增加权限
			this.updateShow = this.purl[0].findIndex((val) => val === "/interface/dictionary/update") //判断是否拥有更新权限
		},
		methods: {
			load(num) {
				axios.get("interface/dictionary/list?pageNo=" + num).then((res) => {
					this.tableLists = res.data.data.pageInfo.list;
					this.options = res.data.data.dicttype; //类别
					this.totals = res.data.data.pageInfo.total; //总条数
					this.size = res.data.data.pageInfo.pageSize; //每页条数
					this.totalPage = res.data.data.pageInfo.pages; //总页数
				})
			},
			handleCurrentChange(val) {
				this.currentPage1 = val - 0; //当前页
				this.inputPage = val;
				//查找的分页跳转
				axios.post("interface/dictionary/list?", qs.stringify({
					name: this.sName,
					pid: this.sVal,
					pageNo: val
				})).then((res) => {
					this.tableLists = res.data.data.pageInfo.list;
					this.options = res.data.data.dicttype; //类别
					this.totals = res.data.data.pageInfo.total; //总条数
					this.size = res.data.data.pageInfo.pageSize; //每页条数
					this.totalPage = res.data.data.pageInfo.pages; //总页数
				})
			},
			add() {
				$("#dic").modal("show");
				$(".dic li a").text("添加字典")
				this.ruleDic.udicName = '';
				this.ruleDic.udicDescribe = '';
				this.ruleDic.udicSort = '';
				this.ruleDic.pid = 0;
				this.id = '';
				$("#save").show();
				$("#usave").hide();
			},
			save(formname) {
				this.$refs[formname].validate((valid) => {
					if(valid) {
						if(!this.ruleDic.udicSort) {
							this.ruleDic.udicSort = 0
						}
						var params = {
							name: this.ruleDic.udicName,
							describ: this.ruleDic.udicDescribe,
							sort: this.ruleDic.udicSort,
							pid: this.ruleDic.pid
						}
						axios.post("interface/dictionary/update?result=" + JSON.stringify(params)).then((res) => {
							if(res.data.code == 1) {
								this.load(this.currentPage1);
								$("#dic").modal("hide")
								this.$message.success("新增成功");
							} else {
								var msg = res.data.msg;
								$("#dic").modal("hide");
								this.$alert(msg, '提示消息', {
									confirmButtonText: '确定',
									callback: action => {
										$("#dic").modal("show");
									}
								});
							}
						})
					} else {
						return false;
					}
				})
			},
			update(index, id) {
				$("#dic").modal("show")
				$(".dic li a").text("更新字典")
				this.ruleDic.udicName = this.tableLists[index].name;
				this.ruleDic.udicDescribe = this.tableLists[index].describ;
				this.ruleDic.udicSort = this.tableLists[index].sort;
				this.ruleDic.pid = this.tableLists[index].pid;
				this.id = id;
				$("#save").hide();
				$("#usave").show();
			},
			uSave(formname) {
				this.$refs[formname].validate((valid) => {
					if(valid) {
						if(!this.ruleDic.udicSort) {
							this.ruleDic.udicSort = 0
						}
						var params = {
							name: this.ruleDic.udicName,
							describ: this.ruleDic.udicDescribe,
							sort: this.ruleDic.udicSort,
							pid: this.ruleDic.pid,
							id: this.id
						}
						axios.post("interface/dictionary/update?result=" + JSON.stringify(params) + "").then((res) => {
							if(res.data.code == 1) {
								this.load(this.currentPage1);
								$("#dic").modal("hide")
								this.$message.success("更新成功");
							} else {
								var msg = res.data.msg;
								$("#dic").modal("hide");
								this.$alert(msg, '提示消息', {
									confirmButtonText: '确定',
									callback: action => {
										$("#dic").modal("show");
									}
								});
							}
						})
					} else {
						return false;
					}
				})
			},
			search() {
				var that = this;
				this.currentPage1 = 1;
				this.inputPage = 1;
				axios.post("interface/dictionary/list?", qs.stringify({
					name: that.sName,
					pid: that.sVal,
					pageNo: 1
				})).then((res) => {
					this.tableLists = res.data.data.pageInfo.list;
					this.options = res.data.data.dicttype; //类别
					this.totals = res.data.data.pageInfo.total; //总条数
					this.size = res.data.data.pageInfo.pageSize; //每页条数
					this.totalPage = res.data.data.pageInfo.pages; //总页数
				})
			},
		}
	}
</script>

<style>

</style>